const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
/***
 * 1.entry
 * 2.output
 * 3.mode
 * 4.devServer
 * 5.plugins
 * 6.module
 */
module.exports = {
    entry: path.join(__dirname, "src/js/main.js"),
    output: {
        path: path.join(__dirname, "dist"),
        filename: 'bundle.js'
    },
    mode: "development",
    devServer: {
        open: true,
        port: 4200,
        contentBase: "src",
        hot: true
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(), // 创建热更新对象
        //功能:默认会创建一个空的HTML，自动引入打包输出的所有资源〔JS/CSS)
        new HtmlWebpackPlugin({ //创建一个 在内存中 生成 HTML  页面的插件
            template: path.join(__dirname, './src/index.html'),  //模板文件的路径,将模板文件的内容复制到html中，生成有结构不空的html
            filename: "index.html"  //指定输出文件的名称
        }),
    ],
    //这个节点用于配置第三方 加载器
    module: {
        //所有的第三方模块的匹配规则，正则表达式（以文件后缀结尾）
        rules: [
            //.css文件用style-loader,css-loader来解析和处理
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }, //配置处理css的loader，默认从右到左解析
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //配置处理less的loader
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, //配置处理scss的loader
            //配置图片的url路径loader,默认为base64的图片
            //{test: /\.(jpg|png|gif|bmp|jpeg)$/, use: ['url-loader?limit=7631&name=[name].[ext]']} 
            //limit给定的值，是图片的大小，单位是 byte，如果我们引用的图片，
            // 大于或等于给定的limit值，则不会被转为base64格式的字符串，如果图片小于给定的 limit值，
            // 则会被转为base64的字符串,name可以使用图片原始的名字来作为路径
            { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: ['url-loader?limit=7631&name=[hash:8].[ext]'] },
            //图片名字相同，但是图片路径不同，这样的话打包的时候会将后面的覆盖前面的图片，
            // 可以在图片前面添加hash值来解决这个问题
            //下面配置bootstrap的字体处理加载器
            { test: /\.(ttf|eot|woff|svg|woff2)$/, use: "url-loader" },
            { test: /\.(tpl|ejs)$/, use: "ejs-loader"}
        ]
    }

}